<html>

<head></head>

<body>
    <h1>JavaScript 进度条</h1>

    <div id="myProgress">
        <div id="myBar" style="width: 100%;"></div>
    </div>

    <br>
    <button onclick="move()">点我</button>
    <style>
        #myProgress {
          width: 100%;
          background-color: #ddd;
        }
        
        #myBar {
          width: 1%;
          height: 30px;
          background-color: #4CAF50;
        }
    </style>

    <script>
        function move() {
          var elem = document.getElementById("myBar");   
          var width = 1;
          var id = setInterval(frame, 10);
          function frame() {
            if (width >= 100) {
              clearInterval(id);
            } else {
              width++; 
              elem.style.width = width + '%'; 
            }
          }
        }
    </script>
</body>

</html>